<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> zTreeSelectM 表单zTree多选下拉框</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="./layui-v2.5.5/css/layui.css" media="all" />
<style>
	form{
		margin:30px;
	}
	.layui-form-label {
		width: 120px;
	}
	.layui-input-block {
		margin-left: 150px;
	}
</style>
</head>
<body>
<form class="layui-form" method="post">
  	<div class="layui-form-item">
		<label class="layui-form-label">zTree多选下拉框:</label>
		<div class="layui-input-block" id="zTreeSelectM"></div>       
	</div>
	<div class="layui-form-item" style="text-align:center;">
		<div class="layui-input-block">
		 	<button type="button" class="layui-btn" lay-submit="" lay-filter="demo">console.log</button>
		 	<button type="button" class="layui-btn layui-btn-primary" id="set">设置 4,7,13</button>
		  	<button type="reset" class="layui-btn layui-btn-primary">重置</button>		  	
		</div>
	</div>
</form>
<script charset="UTF-8" src="./layui-v2.5.5/layui.js"></script> 
<script type="text/javascript"> 
	layui.config({
	    base : './layui-v2.5.5/lay/modules/'
	}).extend({
	    zTreeSelectM: 'zTreeSelectM/zTreeSelectM'
	}).use(['jquery','layer','form','zTreeSelectM'],function(){
	var $ = jQuery = layui.$,
		layer = layui.layer,
		form = layui.form,
		zTreeSelectM = layui.zTreeSelectM;
		
	var _zTreeSelectM = zTreeSelectM({
	    elem: '#zTreeSelectM',//元素容器【必填】          
	    data: './json/1.json',//候选数据【必填】
	    width: 600,  //设置了长度    
	    selected: [3,6,29],//默认值            
	    max: 3,//最多选中个数，默认5            
	    name: 'field',//input的name 不设置与选择器相同(去#.)
	    delimiter: ',',//值的分隔符           
	    field: { idName: 'id', titleName: 'name' },//候选项数据的键名 
	    zTreeSetting: { //zTree设置
	        check: {
	            enable: true,
	            chkboxType: { "Y": "", "N": "" }
	        },
	        data: {
	            simpleData: {
	                enable: false
	            },
	            key: {
	                name: 'name',
	                children: 'children'
	            }
	        }
	    }
	});	
	form.on('submit(demo)',function(data){			 
    	console.log('zTreeSelectM 当前选中的值名：',_zTreeSelectM.selected);
    	console.log('zTreeSelectM 当前选中的值：',_zTreeSelectM.values);
    	console.log('zTreeSelectM 当前选中的名：',_zTreeSelectM.names);      
      
      	var formData = data.field;
      	console.log('表单对象：',formData);
      	return false;
    })
	
	//监听重置按钮
	$('form').find(':reset').click(function(){
		$('form')[0].reset();
		_zTreeSelectM.set();//默认值
		return false;
	});
	
	$("#set").on('click',function(e){			 
    	_zTreeSelectM.set([4,7,13]);
    	return false;
    })
});   
</script>
</body>
</html>